<template>
  <view class="event-return">
    <view class="event-detail-top">
      <view class="event-title "> {{ detailData.zxTaskName }} </view>
      <view class="event-time">任务开始时间：{{ detailData.startTime }}</view>
      <view>任务结束时间：{{ detailData.endTime }}</view>
    </view>
    <u--form :model="form" ref="uForm" labelWidth="180rpx">
      <view class="event-detail-item">
        <span>任务内容：</span> <span>{{ detailData.content }}</span>
      </view>
      <u-form-item label="完成情况" labelWidth="250rpx" prop="completeDescription" label-position="top" required>
        <u--textarea :maxlength="1000" border="none" v-model="form.completeDescription"
          placeholder="请输入完成情况"></u--textarea>
      </u-form-item>
      <u-form-item label="上传附件" prop="pic" label-position="top" required>
        <FileUpload v-model="form.pic"></FileUpload>
      </u-form-item>
    </u--form>
    <view class="footer-black"></view>
    <view class="footer-btn">
		<u-button type="primary" text="提交" @click="submit" class="footer-btn-confirm"></u-button>
      <!-- <view class="footer-btn-confirm" @click="submit">提交</view> -->
    </view>
  </view>
</template>

<script>
import * as SpecialTask from "@/api/special-task.js"
import { formatDate } from "@/utils/common.js"
import FileUpload from "@/components/file-upload/index.vue"
export default {
  components: { FileUpload },
  data() {
    return {
      detailData: {
        title: '',
        startTime: '',
        endTime: '',
      },
      form: {
        completeDescription: '',
        pic: ''
      },
      rules: {
        completeDescription: [
          {
            required: true,
            message: '完成情况不能为空',
            trigger: ['blur', 'change']
          }
        ],
        pic: [
          {
            required: true,
            message: '附件不能为空',
            trigger: ['blur', 'change']
          }
        ]
      }

    };
  },
  methods: {
    gotoBack() {
      uni.navigateBack();
    },
    submit() {
      this.$refs.uForm.validate().then(res => {
        SpecialTask.updateTaskSpecial({ ...this.form, id: this.detailData.id }).then(res => {
          this.gotoBack()
        }).catch(errors => {
          uni.$u.toast(errors)
        })
      }).catch(errors => {
        uni.$u.toast('校验失败')
      })
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onLoad(options) {
    const { id } = options;
    SpecialTask.getSpecialDetail({ id }).then(res => {
      this.detailData = {
        ...res.data,
        startTime: formatDate(res.data.startTime),
        endTime: formatDate(res.data.endTime)
      }
    })
  }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.event-detail-top {
  width: 686rpx;
  background: #F6F6F6;
  border-radius: 4rpx;
  text-align: center;
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  margin: 0 auto 32rpx;
  padding: 32rpx;

  .event-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 500;
  }

  .event-time {
    margin: 16rpx 0;
  }
}

.footer-btn-confirm {
  width: 50%;
}

.u-form-item {
  padding: 0 30rpx;
}

.event-detail-item {
  margin-bottom: 20rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  margin: 32rpx;
}

</style>